<template>
  <div>

    <el-divider direction="vertical"></el-divider>
    <span style="font-size: 12px">工作统计</span>
    <el-table
      :data="tableData"
      size="medium"
      highlight-current-row
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" width="40" />
      <el-table-column prop="userName" label="姓名" width="100px"></el-table-column>
      <el-table-column prop="dev" label="任务" width="75px"></el-table-column>
      <el-table-column prop="events" label="生产" width="75px"></el-table-column>
      <el-table-column prop="selfTest" label="待自测" width="75px"></el-table-column>
      <el-table-column prop="test" label="测试" width="75px"></el-table-column>
      <el-table-column prop="back" label="回归" width="75px"></el-table-column>
      <el-table-column prop="total" label="合计" width="75px"></el-table-column>
    </el-table>

  </div>

</template>

<script>
export default {
  name: 'tableList',
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    getTableData(data) {
      this.tableData = data
      let dev = 0
      let event = 0
      let test = 0
      let back = 0
      let total = 0
      let selfTest = 0
      this.tableData.forEach(e => {
        dev += e.dev
        event += e.events
        selfTest += e.selfTest
        test += e.test
        back += e.back
        total += e.total
      })
      this.tableData.push({
        userName: '合计',
        dev: dev,
        events: event,
        test: test,
        back: back,
        selfTest: selfTest,
        total: total
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.userName === '合计') {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table .warning-row {
  background: #f0f9eb;
}
</style>
